<template>
  <div class="user-container">
    <!-- 顶部导航 -->
    <van-nav-bar class="page-nav-bar" title="个人中心">
      <van-icon slot="left" class="left-icon" name="arrow-left" @click="$router.go(-1)" />
    </van-nav-bar>

    <input type="file" ref="inp" hidden @change="changeUrl">
    <van-cell @click="$refs.inp.click()" title="头像" is-link>
      <van-image round class="avatar" :src="userInfo.photo" />
    </van-cell>
    <van-cell title="昵称" @click="isShowEditName=true" :value="userInfo.name" is-link />
    <van-cell @click="isShowEditGender=true" title="性别" :value="userInfo.gender?'女':'男'" is-link />
    <van-cell @click="isShowEditBirthday=true" title="生日" :value="userInfo.birthday" is-link />

    <!-- 修改昵称弹出层 -->
    <van-popup v-model="isShowEditName" position="bottom" :style="{ height: '100%' }">
      <EditUserName v-if="isShowEditName" v-model="userInfo.name" @close-popup="isShowEditName=false" />
    </van-popup>

    <!-- 修改性别弹出层 -->
    <van-popup v-model="isShowEditGender" position="bottom">
      <EditUserGender v-if="isShowEditGender" v-model="userInfo.gender" @close-popup="isShowEditGender=false" />
    </van-popup>

    <!-- 修改生日弹出层 -->
    <van-popup v-model="isShowEditBirthday" position="bottom">
      <EditUserBirthday v-model="userInfo.birthday" @close-popup="isShowEditBirthday=false" />
    </van-popup>

    <!-- 修改头像弹出层 -->
    <van-popup v-model="isShowEditAvatar" position="bottom" :style="{ height: '100%' }">
      <EditUserAvatar v-if="isShowEditAvatar" :imgUrl="imgUrl" @close_popup="isShowEditAvatar=false"
        @onSuccessPhoto="userInfo.photo=$event" />
    </van-popup>
  </div>
</template>

<script>
import EditUserName from './components/eddit-user_name.vue'
import EditUserGender from './components/edit-user_gender.vue'
import EditUserBirthday from './components/edit-user_birthday.vue'
import EditUserAvatar from './components/edit-user_avatar.vue'
import { getUserInfo } from '@/api/user.js'
export default {
  name: 'User',
  data () {
    return {
      userInfo: {},
      // 修改昵称弹层状态
      isShowEditName: false,
      // 修改性别弹层状态
      isShowEditGender: false,
      // 修改生日弹层状态
      isShowEditBirthday: false,
      // 上传图片的地址
      imgUrl: '',
      // 修改头像弹层状态
      isShowEditAvatar: false
    }
  },
  props: {},
  methods: {
    // 获取用户自己信息
    async getUserInfoList () {
      try {
        const res = await getUserInfo()
        // console.log(res)
        this.userInfo = res.data.data
      } catch (err) {
        this.$toast('获取失败')
      }
    },
    // 输入框发生改变的时候
    changeUrl (e) {
      // console.log(e)
      // 拿到上传的文件
      const file = e.target.files[0]
      // 转换成url
      const imgURLl = URL.createObjectURL(file)
      this.imgUrl = imgURLl
      // 显示弹出层
      this.isShowEditAvatar = true
      // 清空value，防止下次选择同一张图片的时候不触发change事件
      e.target.value = ''
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: {
    EditUserName,
    EditUserGender,
    EditUserBirthday,
    EditUserAvatar
  },
  created () {
    this.getUserInfoList()
  },
  mounted () { }
}
</script>

<style scoped lang='less'>
.user-container {
  .avatar {
    width: 50px;
    height: 50px;
  }
}
</style>
